<template>
	<view class="mypage-wrap">
		<view class="user-info">
			<view class="user-box">
				<image :src="avatart" class="main-img" mode="widthFix"></image>
				<view class="user-title">{{nickname}}</view>
			</view>
		</view>
		<view class="list-info">
			<view class="list-item" v-for="(item, index) in listInfo" :key="index" @click="handleTab(item)">
				<view class="list-item-tips">
					<view class="list-left">
						<u--image :src="item.img" width="40rpx" height="40rpx"></u--image>
						<text class="text-box">{{ item.text }}</text>
					</view>
					<view class="list-right">
						<u-icon name="arrow-right" v-if="index !== listInfo.length - 1"></u-icon>
						<view v-else class="edition-box">1.0.0</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="btn-info" @click="logOut">退出登录</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			avatart: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/portrait.png',
			listInfo: [
				{
					text: '使用协议',
					img: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/mypage.png',
					path: '/subPackages/usageAgreement/usageAgreement'
				},
				{
					text: '操作说明',
					img: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/mypage2.png',
					path: '/subPackages/explainPage/explainPage'
				},
				{
					text: '联系我们',
					img: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/mypage3.png',
				},
				{
					text: '修改密码',
					img: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/mypage4.png',
					path: '/subPackages/changePassword/changePassword'
				},
				{
					text: '当前版本',
					img: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/mypage5.png'
				}
			],
			nickname:'',
			isShow:true
		};
	},
	onLoad() {
		this.nickname=uni.getStorageSync('userData').nickname 
	},
	methods: {
		logOut(){
			uni.showModal({
				title: '温馨提示',
				content: `您确定要退出登录吗?`,
				success: (res)=> {
					if(res.confirm){
						uni.clearStorageSync() //清空所有缓存
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}else{
						console.log('用户取消')
					}
					
				}
			})
		},
		handleTab(item) {
			if (item.path) {
				this.goNavigateTo(item.path);
			} else if (item.text == '联系我们') {
				uni.makePhoneCall({
					phoneNumber:'132388382834', // 电话号码
					success() {
						console.log('拨打电话成功');
					},
					fail(){
						console.log('拨打电话失败');
					}
				});
			}
		},
		showToast(title) {
			uni.showToast({
				title: title,
				icon: 'none'
			});
		},
		goNavigateTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.mypage-wrap {
	min-height: 100vh;
	background: #f6f9fe;
}
.user-info {
	display: flex;
	height: 240rpx;
	border-radius: 0 0 20rpx 20rpx;
	background-color: rgba(64, 158, 255, 0.5);
	border-radius: 0 0 30rpx 30rpx;
	background-size: cover;
}
.main-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
.user-box {
	padding: 30rpx;
	display: flex;
	align-items: center;
}
.user-title {
	margin-left: 20rpx;
	font-size: 32rpx;
	color: #333;
	font-weight:700;
}
.list-info {
	box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
	border-radius: 20rpx;
	margin: 20rpx;
}
.list-item {
	padding: 30rpx;
	font-size: 30rpx;
	color: #333;
	border-bottom: 1rpx #dcdfe6 solid;
}
.list-item:last-child {
	border: none !important;
}
.list-item-tips {
	display: flex;
	justify-content: space-between;
}
.edition-box {
	color: #5e6d82;
}
.footer-btn {
	padding: 30rpx;
}
.btn-info {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	background: #409eff;
	color: #fff;
	text-align: center;
	font-size: 28rpx;
}
.list-left{
	display: flex;
}
.text-box{
	margin-left:30rpx;
}
</style>
